<template>
  <el-container>
    <!-- 顶部导航栏 -->
    <el-header v-if="userId&&userId!='admin'">
      <!-- <HeaderNav :userId="userId"></HeaderNav> -->
      <HeaderNav  :userId="userId" :userType="userType" :msgStatus="msgStatus" style="width:100%"></HeaderNav>
    </el-header>
    <el-header v-if="userId=='admin'">
      <HeaderAdmin style="width:100%"></HeaderAdmin>
    </el-header>
    <!-- 页面主体 -->
    <el-main>
        <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import HeaderNav from './HeaderNav.vue'
import HeaderAdmin from './HeaderAdmin.vue'

export default {
  data () {
    return {
      userId: this.$route.params.id,
      userType: '',
      msgStatus: true,
      searchInput: '',
      select: '1'
    }
  },
  mounted () {
    this.userId = this.$route.params.id
    // this.userType
    if (this.userId !== 'admin') {
      this.getUserType()
      this.getMsgStatus()
    }
  },
  methods: {
    getUserType () {
      this.$axios.get('/user/getUserType', {
        params: {
          userId: this.userId
        }
      }).then(res => {
        console.log(res)
        this.userType = res.data.data
        console.log(this.userType)
      }).catch(err => {
        if (err.response) {
          // console.log(err.response.status)
          if (err.response.status === 404) {
            alert('客户端请求出现问题')
          } else if (err.response.status >= 500) {
            alert('服务端接口出现问题')
          }
        } else if (err.request) { // 请求已经发起但没有响应，需要配合后端实现的错误处理
          console.error(err.request)
        } else { // 请求没有发起，也没有响应，需要配合后端实现的错误处理
          console.error(err.message)
        }
      })
    },
    getMsgStatus () {
      this.$axios.get('/user/getMsgStatus', {
        params: {
          userId: this.userId
        }
      }).then(res => {
        console.log(res)
        this.msgStatus = res.data.data
        console.log(this.msgStatus)
      }).catch(err => {
        if (err.response) {
          // console.log(err.response.status)
          if (err.response.status === 404) {
            alert('客户端请求出现问题')
          } else if (err.response.status >= 500) {
            alert('服务端接口出现问题')
          }
        } else if (err.request) { // 请求已经发起但没有响应，需要配合后端实现的错误处理
          console.error(err.request)
        } else { // 请求没有发起，也没有响应，需要配合后端实现的错误处理
          console.error(err.message)
        }
      })
    },
    toLogin () {
      this.$router.push('/welcome')
    },
    search () {
      if (this.searchInput !== '') {
        // eslint-disable-next-line no-unused-expressions
        this.$router.push('/home/' + this.userId + '/search/' + this.select + '/' + this.searchInput)
      } else {
        alert('请输入搜索内容')
      }
    }
  },
  components: {
    HeaderNav, // Login: Login
    HeaderAdmin
  }
}
</script>

<style lang="less" scoped>
.el-header {
  // border-bottom: 1px solid #808080;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 20px;
  .logoTitle {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  };
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
    margin-right: 15px;
  }
}

.el-container{
    height: 100%;
}

.el-main{
  // border-bottom: 1px solid #808080;
  background-color: #f7f8fa;
}

</style>
